{% load static %}
<!DOCTYPE html>
<html>
<head>
    <title>中通钢管数据可视化</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="{% static "production_ms/css/down.css" %}">
    <!--引入echarts和jquery-->
    <script src="{% static "production_ms/common/echarts.min.js" %}"></script>
    <script src="{% static "production_ms/common/jquery-3.6.0.min.js" %}"></script>
    <!--引入图标和导航栏script-->
    <link rel="shortcut icon " type="images/x-icon" href="{% static "production_ms/common/logo.png" %}">
    <script src="{% static "production_ms/js/script.js" %}"></script>
    <!--保证时间选择框运行所必要的组件-->
    <script src="{% static "production_ms/common/datepick/bootstrap-datepicker.min.js" %}"></script>
    <script src="{% static "production_ms/common/datepick/bootstrap-datepicker.zh-CN.js" %}"></script>
    <script src="{% static "production_ms/common/datepick/bootstrap.min.js" %}"></script>
    <link rel="stylesheet" href="{% static "production_ms/common/datepick/bootstrap-datepicker3.min.css" %}">
    <link rel="stylesheet" href="{% static "production_ms/common/datepick/bootstrap.min.css" %}">
    <style>
        /*导航栏的样式*/
        ul {
            padding-left: 0;
        }

        ul li {
            list-style-type: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .page-header {
            background-color: rgb(255, 255, 255);
            position: absolute;
            width: 100%;
            min-width: 960px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
            z-index: 1;
        }

        .page-header.sticky {
            position: fixed;
            top: 0;
        }

        .page-header > .inner {
            margin: auto;
            width: 960px;
        }

        .no-boxshadow .page-header {
            border-bottom: 1px solid rgb(204, 204, 204);
        }

        .primary-nav {
            float: right;
            line-height: 80px;
            letter-spacing: 1px;
            text-transform: uppercase;
        }

        .primary-nav li {
            float: left;
        }

        .primary-nav a {
            display: block;
            padding: 0 1.36em;
        }

        .primary-nav a:hover {
            background-color: rgb(240, 240, 240);
        }
    </style>
    <script>
        $(document).ready(function () {
            var hxy1 = {{ time.0 }}
            var hxy2 = {{ time.1 }}
                $("#btn").click(function () {
                    var cmy1 = $('#xph1').val()
                    var cmy2 = $('#xph2').val()
                    if (cmy1 > cmy2) {
                        alert('警告：起始日期大于小于结束日期')
                        $('#xph1').val(hxy1)
                        $('#xph2').val(hxy2)
                    } else if (cmy1 === '' || cmy2 === '') {
                        alert('警告：起始日期或结束日期未选择')
                        $('#xph1').val(hxy1)
                        $('#xph2').val(hxy2)
                    } else if (cmy1 === hxy1 && cmy2 === hxy2) {
                        alert('警告：本次选择的日期和上一次完全一样')
                    } else {
                        $.ajax({
                            url: '{% url 'down2' %}',
                            type: 'post',
                            data: {'start': cmy1, 'stop': cmy2},
                            success: function (data) {
                                $("#cmy").html(data);
                                hxy1 = cmy1
                                hxy2 = cmy2
                            },
                            error: function (data) {
                                alert('出现问题')
                            }
                        })
                    }
                });
            $('#xph1').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
            });
            $('#xph2').datepicker({
                language: "zh-CN",
                clearBtn: true,
                autoclose: true,
                todayHighlight: true,
            });
        })
    </script>
</head>

<body>
<!-- 大标题 -->
<div class="title">
    <img src="{% static "production_ms/common/logo.png" %}" style="width: 100px;height: 100px" alt="公司logo">
    <h1>中通钢管数据可视化平台</h1>
</div>
<!-- 页面导航栏 -->
<header class="page-header">
    <div class="inner">
        <nav class="primary-nav">
            <ul>
                <li><a href="down" target="_blank">停机分析</a></li>
                <li><a href="stoppage" target="_blank">故障分析</a></li>
                <li><a href="parse" target="_blank">生产分析</a></li>
                <li><a href="contrast" target="_blank">信息对比</a></li>
            </ul>
        </nav>
    </div>
</header>

<div class="b1">
    <div class="b0" style="margin: 70px 50px 70px 50px">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="xph1">开始日期：</label><input type="text" id="xph1" value="{{ time.0 }}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger">
        <label style="width: 150px;display: inline-block;font-size: x-large" for="xph2">结束日期：</label><input type="text" id="xph2" value="{{ time.1 }}" style="width: 247px;height: 50px;margin-right: 100px;font-size: larger"><button id="btn" style="width: 200px;height: 50px;display: inline-block">提交</button>
    </div>
    <div id="cmy">

    {% include 'production_ms/down/down.html' %}

    </div>
</div>
<footer>
    <div class="text">数据来源：精益项目组收集整理</div>
</footer>
</body>
</html>